<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TabBar 图标预览</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
        h1 {
            color: #1890FF;
            text-align: center;
            margin-bottom: 30px;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .icon-item {
            text-align: center;
            padding: 20px;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            background: #fafafa;
        }
        .icon-item h3 {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 16px;
        }
        .icon-states {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .icon-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .icon-state img {
            width: 40px;
            height: 40px;
        }
        .icon-state span {
            font-size: 12px;
            color: #666;
        }
        .color-info {
            background: #f0f9ff;
            border: 1px solid #bae7ff;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
        }
        .color-info h3 {
            margin: 0 0 10px 0;
            color: #1890FF;
        }
        .color-swatch {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 8px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>工作台 TabBar 图标预览</h1>
        
        <div class="icon-grid">
            <div class="icon-item">
                <h3>工作台</h3>
                <div class="icon-states">
                    <div class="icon-state">
                        <img src="home.svg" alt="工作台">
                        <span>未选中</span>
                    </div>
                    <div class="icon-state">
                        <img src="home_active.svg" alt="工作台选中">
                        <span>选中</span>
                    </div>
                </div>
            </div>
            
            <div class="icon-item">
                <h3>场地</h3>
                <div class="icon-states">
                    <div class="icon-state">
                        <img src="venue.svg" alt="场地">
                        <span>未选中</span>
                    </div>
                    <div class="icon-state">
                        <img src="venue_active.svg" alt="场地选中">
                        <span>选中</span>
                    </div>
                </div>
            </div>
            
            <div class="icon-item">
                <h3>订单</h3>
                <div class="icon-states">
                    <div class="icon-state">
                        <img src="orders.svg" alt="订单">
                        <span>未选中</span>
                    </div>
                    <div class="icon-state">
                        <img src="orders_active.svg" alt="订单选中">
                        <span>选中</span>
                    </div>
                </div>
            </div>
            
            <div class="icon-item">
                <h3>会员</h3>
                <div class="icon-states">
                    <div class="icon-state">
                        <img src="profile.svg" alt="会员">
                        <span>未选中</span>
                    </div>
                    <div class="icon-state">
                        <img src="profile_active.svg" alt="会员选中">
                        <span>选中</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="color-info">
            <h3>设计规范</h3>
            <p><span class="color-swatch" style="background: #7A7E83;"></span><strong>未选中颜色:</strong> #7A7E83 (中性灰)</p>
            <p><span class="color-swatch" style="background: #007AFF;"></span><strong>选中颜色:</strong> #007AFF (主题蓝)</p>
            <p><strong>尺寸:</strong> 81x81px (SVG矢量格式)</p>
            <p><strong>风格:</strong> 简洁线性设计，2.5px 线条粗细</p>
            <p><strong>兼容性:</strong> 与工作台界面的蓝色主题 (#1890FF) 保持一致</p>
        </div>
        
        <div class="color-info" style="background: #fff2e8; border-color: #ffd591;">
            <h3 style="color: #fa8c16;">注意事项</h3>
            <p>uni-app 的 tabBar 通常需要 PNG 格式图标。如果 SVG 不被支持，请使用以下方法转换：</p>
            <ol>
                <li>使用在线 SVG 转 PNG 工具（如 convertio.co）</li>
                <li>使用设计软件（如 Figma、Sketch）导出 PNG</li>
                <li>使用命令行工具（如 ImageMagick）批量转换</li>
            </ol>
            <p>推荐尺寸：81x81px（@1x）、162x162px（@2x）、243x243px（@3x）</p>
        </div>
    </div>
</body>
</html>